{% load i18n common %}
<div style="padding: 10px;min-height: 240px;min-width: 300px">
    <form class="layui-form action-form" action="" method="post" id="{{ model_name }}_{{ action_repr }}"
          enctype="multipart/form-data">
        {% csrf_token %}
        {% with form.form as f %}
            <div class="layui-form-item">
                {% layui_inline f.audit_status %}
            </div>
            <div class="layui-form-item">
                {% layui_inline f.audit_reason %}
            </div>
            {% if f.vacation_type == True %}
            <div class="layui-form-item">
                {% layui_inline f.vacation_number %}
            </div>
            <div class="layui-form-item">
                 <div class="layui-inline">
                      <label for="" class="layui-form-label">{% trans "employee_label_vacation" %}</label>
                      <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="vacationCount" type="text" class="layui-input" disabled style="min-width: 110px !important;">
                      </div>
                      <div class="layui-form-mid layui-word-aux">
                        <a id="vacationRefresh" href="javascript:void(0);" class="layui-btn layui-btn-sm" onclick="vacationRefresh()">{% trans 'employee_btn_vacationRefresh' %}</a>
                      </div>
                    </div>
            </div>
            <div class="layui-form-item">
                 <div class="layui-inline">
                      <label for="" class="layui-form-label">{% trans "employee_label_vacationLeft" %}</label>
                      <div class="layui-input-inline" style="width: 115px !important;">
                        <input id="vacationleft" type="text" class="layui-input" disabled style="min-width: 110px !important;">
                      </div>
                  </div>
              </div>
            {% endif %}
        {% endwith %}
    </form>
</div>
<script>
   layui.use('form', function() {
        var form = layui.form;
        form.render();
        {% if form.form.vacation_type == True %}
          vacationRefresh();
        {% endif %}
    });
    function vacationRefresh() {
        $.ajax({
              url: "/personnel/vacation_refresh/?emp={{ form.form.employee_id }}"
              ,type: "GET"
              ,contentType: false
              ,processData: false
              ,success: function (response) {
                  response = $.parseJSON(response)
                    if(response['code'] == 0){
                         $('#vacationCountitem').removeClass('layui-hide')
                         $('#vacationCount').val(response['vacation_days'])
                        $('#vacationleft').val(response['vacation_left'])
                    }
              }
          });
    }
</script>